<template>
  <section class="color">
    <el-color-picker v-model="value" :show-alpha="showalpha" @change="handleChange"></el-color-picker>
  </section>
</template>
<script>
import mixins from './../mixins'
export default {
  name: 'VColor',
  mixins: [mixins],
  props: {
    option: {
      type: Object,
      default: {}
    }
  },
  computed: {
    showalpha () {
      return this.option.showalpha
    }
  },
  methods: {
    getValue () {
      return this.value
    },

    setValue (v) {
      this.$set(this, 'value', v)
    },

    setCheck () {
      let { value, required } = this
      let error = false, errorMsg = ''
      if (value !== undefined && value !== null) {
        value = value + ''
      }
      if (required && !value) {
        error = true
        errorMsg = '必填选项不能为空'
      }
      this.error_ = error
      this.error_message_ = errorMsg
      this.fieldCheck()
    },

    handleChange (e) {
      this.setCheck()
      this.dispatch_event('filed-value-change', e)
    }
  }
}
</script>
